<#include "../common/header.htm">
<div class="content-wrapper" id="one_key_search_DataTemplate">
    <div style="margin-top: 19px;">
        <div style="margin: 10px">
            <el-button
                    size="mini"
                    type="primary"
                    @click="handleAdd()">新增</el-button>
        </div>
        <el-table
                :data="tableData"
                border
                style="width: 100%">
            <el-table-column
                    prop="mobanname"
                    label="模板名称"
                    >
            </el-table-column>
            <el-table-column
                    prop="tablename"
                    label="模板代码"
                   >
            </el-table-column>
            <el-table-column
                    prop="sourceType"
                    label="资源类型">
                <template slot-scope="scope">
                    <span >{{ scope.row.sourceType | formatSourceType  }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    prop="templateType"
                    label="模板类型">
                <template slot-scope="scope">
                    <span >{{ scope.row.templateType | formatTemplateType  }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    prop="beginLine"
                    label="标题头所在的行">
            </el-table-column>
            <el-table-column
                    prop="createTime"
                    label="创建时间">
                <template slot-scope="scope" v-if="scope.row.createTime">
                    <span >{{ scope.row.createTime | formatDate  }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="380">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            type="primary"
                            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="handleEditField(scope.$index, scope.row)">编辑字段</el-button>
                    <el-button
                            size="mini"
                            type="info"
                            @click="handleShowData(scope.$index, scope.row)">查看数据</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                background
                :current-page.sync="currentPage"
                :page-size="pageSize"
                @size-change="handleSizeChange"
                :page-sizes="[20, 50, 100, 200]"
                @current-change="handleCurrentChange"
                layout="total,sizes,prev, pager, next"
                :total="total">
        </el-pagination>

        <el-dialog
                title="新增模板"
                :visible.sync="dialogVisible"
                width="50%"
                >
                <el-form ref="template" :model="template" label-width="80px">
                    <el-form-item label="模板名称">
                        <el-input  class="sapceCol" v-model="template.mobanname" placeholder="比如：酒店模板"></el-input>
                    </el-form-item>
                    <el-form-item label="模板代码">
                        <el-input  class="sapceCol" v-model="template.tablename" placeholder="比如：jdmb"></el-input>
                    </el-form-item>
                    <el-form-item label="资源类型">
                        <el-select v-model="template.sourceType" placeholder="请选择资源类型">
                            <el-option label="自定义模板" value="1"></el-option>
                            <el-option label="接入的第三方数据" value="2"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="模板类型">
                        <el-select v-model="template.templateType" placeholder="请选择模板类型">
                            <el-option label="自定义" value="0"></el-option>
                            <el-option label="系统定义" value="1"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="标题头所在的行" calss="titleRow">
                        <el-input v-model="template.beginLine"  placeholder="从0开始"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="addTemplate()">确 定</el-button>
                </span>
        </el-dialog>
    </div>
</div>
<link rel="stylesheet" href="${ctx}/bower_components/vue/css/element-ui.css">
<script src="${ctx}/bower_components/vue/js/vue.min.js"></script>
<script src="${ctx}/bower_components/vue/js/element-ui.js"></script>
<script src="${ctx}/bower_components/vue/js/axios.js"></script>
<script type="text/javascript">
    var vm=new Vue({
        el: '#one_key_search_DataTemplate',
        data:{
            dialogVisible: false,
            tableData: [],
            currentPage:1,
            pageSize:20,
            total:0,
            template:{
                mobanname:'',
                tablename:'',
                sourceType:'1',
                templateType:'0',
                beginLine:'',
            }
        },
        created:function () {
            this.getlist();
        },
        filters: {
            formatDate(time) {
                var date = new Date(time);
                return formatDate(date, 'yyyy-MM-dd hh:mm');
            },
            formatSourceType(val) {
                if (val==1){
                    return "自定义模板"
                }
                if (val==2) {
                    return "接入的第三方数据"
                }
            },
            formatTemplateType(val) {
                if (val==0){
                    return "自定义"
                }
                if (val==1) {
                    return "系统定义"
                }
            },
        },
        methods:{
            handleEditField(index, row){  //编辑模板字段
                window.location.href='${ctx}/onekey/updatePage/'+row.vid;
            },
            addTemplate(){
                if (!this.template.mobanname){
                    vm.$message.error('模板名字不能为空');
                    return true
                }
                if (!this.template.tablename){
                    vm.$message.error('模板标识不能为空');
                    return true
                }
                if (!this.template.sourceType){
                    vm.$message.error('资源类型不能为空');
                    return true
                }
                if (!this.template.templateType){
                    vm.$message.error('模板类型不能为空');
                    return true
                }
                if (!this.template.beginLine){
                    vm.$message.error('标题头所在的行不能为空');
                    return true
                }
                axios.post('${ctx}/onekey/addTemplate', {
                    vid:this.template.vid,
                    mobanname:this.template.mobanname,
                    tablename:this.template.tablename,
                    sourceType:this.template.sourceType,
                    templateType:this.template.templateType,
                    beginLine:this.template.beginLine,
                }).then(function (response) {
                    if (response.data.code==20000){
                        if (vm.template.vid) {
                            vm.$message.success('更新模板成功');
                        }else{
                            vm.$message.success('新增模板成功');
                        }
                        vm.template={}
                        vm.dialogVisible = false
                        vm.getlist()
                    }else{
                        vm.$message.error('新增模板失败,模板代码不能重复');
                    }

                })
            },
            handleAdd(){
                this.dialogVisible=true;
            },
            handleEdit(index, row) {
                console.log(index, row);
                axios.get('${ctx}/onekey/findTemplateById/'+row.vid, {
                }).then(function (response) {
                    if (response.data.code==20000){
                        let t=response.data.data;
                        t.sourceType=t.sourceType.toString()
                        t.templateType=t.templateType.toString()
                        vm.template=t
                    }
                })
                this.dialogVisible=true;
            },
            handleDelete(index, row) {
                console.log(index, row);
                this.$confirm('是否删除该模板, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.delete('${ctx}/onekey/del/'+row.vid, {
                    }).then(function (response) {
                        if (response.data.code==20000){
                            vm.$message.success('删除成功');
                            vm.getlist()
                        }else{
                            vm.$message.error('删除失败');
                        }
                    })
                })
            },
            handleShowData(index, row) {
                console.log("查看数据",index, row);
                window.location.href='${ctx}/onekey_dataSource/list/'+row.tablename
            },
            handleSizeChange(val){
                this.pageSize=val;
                this.getlist();
            },
            handleCurrentChange(val){
                vm.currentPage = val;
                vm.getlist();
            },
            getlist(){
                axios.post('${ctx}/onekey/search/'+this.currentPage+'/'+this.pageSize, {
                }).then(function (response) {
                    vm.tableData=response.data.data.content;
                    vm.total=response.data.data.totalElements
                })
            },
            openBigPic(templateName){
                vm.templatePic="http://47.105.197.249:8888/base-site/templatePic/"+templateName+".jpg";
                vm.dialogVisible = true
            },
            del(id){
                this.$confirm('确定删除该模板么, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.delete('${ctx}/rule/'+id, {
                    }).then(function (response) {
                        if (response.data.code=20000) {
                            vm.$message({
                                message: '删除模板成功',
                                type: 'success'
                            });
                            vm.getlist()
                        }else{
                            vm.$message.error('删除模板失败');
                        }
                    })
                });

            }
        }
    })
</script>
<style>
    .el-dialog{
        margin: 0
    }
    .el-select-dropdown__item.selected{
        color: #ffffff;
    }
    .el-select .el-input .el-select__caret{
        top: 2px;
    }
</style>
<#include "../common/footer.htm">